<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>

</head>
<style>
    .lay-tree-menu{
        height: 60vh;
        overflow: auto;
        border: 1px solid #e8eaea;
    }
</style>
<body>
    <div th:include="load"></div>
    <div class="layui-row layui-col-space15 layui-anim layui-anim-upbit">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span class="layui-breadcrumb">
                        <a href="javascript:void(0)">系统管理</a>
                        <a><cite>角色管理</cite></a>
                    </span>
                </div>
                <div class="layui-card-body">
                    <table id="data_table" class="layui-hide" lay-filter="data_table"></table>
                </div>
            </div>
        </div>
    </div>
    <!-- 授权菜单 -->
    <form class="layui-form" id="role_menu_form"  action="" lay-filter="role_menu_form" style="padding:10px;display: none;">
        <fieldset class="layui-elem-field layui-field-title" style="color:#89b586;">
            <legend>授权菜单</legend>
        </fieldset>
        <input type="text" name="rid" class="layui-input" style="display: none">
        <div class="layui-form-item lay-tree-menu">
            <div id="menu_tree" class="demo-tree"></div>
        </div>
        <br>
        <div class="layui-form-item" style="text-align: center;">
            <a class="layui-btn lay-submit-btn" lay-submit="" lay-filter="roleMenuForm">立即提交</a>
            <a class="layui-btn layui-btn-primary lay-close-btn">关闭</a>
        </div>
    </form>
    <!-- 授权按钮 -->
    <form class="layui-form" id="role_menu_operation_form"  action="" lay-filter="role_menu_operation_form" style="padding:10px;display: none;">
        <fieldset class="layui-elem-field layui-field-title" style="color:#89b586;">
            <legend>授权菜单按钮操作权限</legend>
        </fieldset>
        <input type="text" name="rid" class="layui-input" style="display: none">
        <div class="layui-form-item" id="checkBox">

        </div>
        <div class="layui-form-item">
            <table id="role_menu_operation_table" class="layui-hide" lay-filter="role_menu_operation_table"></table>
        </div>
        <div class="layui-form-item" style="text-align: center;margin-top: 30px;">
            <a class="layui-btn lay-submit-btn" lay-submit="" lay-filter="menuOperationForm">立即提交</a>
            <a class="layui-btn layui-btn-primary lay-close-btn">关闭</a>
        </div>
    </form>
    <!-- 查询 -->
    <form class="layui-form" id="search_form" action="" lay-filter="searchForm"  style="padding: 20px 10px 10px;display: none">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="rname"  placeholder="请输入名称关键字"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">使用类型</label>
                <div class="layui-input-inline" id="search_type"></div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">使用状态</label>
                <div class="layui-input-inline" id="search_state"></div>
            </div>
            <div class="layui-inline" style="text-align: center;">
                <a lay-submit  class="layui-btn lay-close-btn"  lay-filter="submitSearch">查询</a>
                <a class="layui-btn layui-btn-primary lay-reset-btn">重置</a>
            </div>
        </div>
    </form>
    <!-- 新增编辑表单 -->
    <form class="layui-form" id="data_form"  action="" lay-filter="data_form" style="padding:10px;display: none;">
        <fieldset class="layui-elem-field layui-field-title" style="color:#89b586;">
            <legend>基本信息</legend>
        </fieldset>
        <input type="text" name="rid" class="layui-input" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label req">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="rname" placeholder="请输入名称" autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label req">使用状态</label>
            <div class="layui-input-block" id="state"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限范围</label>
            <div class="layui-input-block" id="type"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="remarks"></textarea>
            </div>
        </div>
        <br>
        <div class="layui-form-item" style="text-align: center;">
            <a class="layui-btn lay-submit-btn" lay-submit="" lay-filter="submitForm">立即提交</a>
            <a class="layui-btn layui-btn-primary lay-close-btn">关闭</a>
        </div>
    </form>
</body>

<script type="text/html" id="toolberLeft">
    <div class="layui-form">
        <a th:if="${btn_add}" class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add" style="margin-left: 5px;"><i class="layui-icon">&#xe654;</i>新增</a>
        <a class="layui-btn layui-btn-sm" lay-event="search" style="margin-left: 5px;"><i class="layui-icon">&#xe615;</i>搜索</a>
    </div>
</script>
<script type="text/html" id="toolRow">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a th:if="${btn_edit}" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{#  if(d.rid == 1){ }}
    <a th:if="${btn_delete}" class="layui-btn layui-btn-disabled layui-btn-xs">删除</a>
    {{#  } else { }}
    <a th:if="${btn_delete}" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  } }}
    <a th:if="${btn_power}" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="power">授权菜单</a>
    <a th:if="${btn_power}" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="power_operation">授权菜单按钮</a>
</script>
<script type="text/html" id="switchRow">
    <input type="checkbox" {{d.rid==1?"disabled":""}} rid="{{d.rid}}" {{d.state==1?"checked":""}} name="state" lay-skin="switch" lay-filter="stateSwitch" lay-text="启用|禁用">
</script>

<script type="text/javascript" th:src="@{/js/sys/role.js}"></script>

</html>